<!--
  * 财务报表-经销商往来
  *
-->
<template>
  <!---------- 查询表单form begin ----------->
  <a-card size="small" :bordered="false" :hoverable="false" class="query-form-wrapper smart-margin-bottom10 smart-radius-2">
    <a-form>
      <a-row :gutter="[8, 10]">
        <a-col :span="3">
          <a-form-item label="经销商" class="smart-margin-bottom0">
            <DealerSelect v-model:value="queryForm.dealer_id" placeholder="经销商" @submit="onSearch" />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="5">
          <a-form-item label="单据日期" class="smart-margin-bottom0">
            <a-range-picker :allowEmpty="[true, true]" v-model:value="queryForm.create_time" valueFormat="YYYY-MM-DD" allow-clear :presets="TIME_RANGE_PRESETS" @change="onSearch" />
          </a-form-item>
        </a-col> -->
        <a-col :span="5">
          <a-button-group>
            <a-button type="primary" html-type="submit" @click="onSearch" v-privilege="'goods:query'">
              <template #icon>
                <SearchOutlined />
              </template>
              查询
            </a-button>
            <a-button @click="resetQuery" v-privilege="'goods:query'">
              <template #icon>
                <ReloadOutlined />
              </template>
              重置
            </a-button>
          </a-button-group>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
  <!---------- 查询表单form end ----------->

  <a-card size="small" :bordered="false" :hoverable="true" class="query-table-wrapper">
    <!---------- 表格操作行 begin ----------->
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block">
        <a-button @click="onExportGoods" type="primary" v-privilege="'goods:exportGoods'">
          <template #icon>
            <ExportOutlined />
          </template>
          导出
        </a-button>
      </div>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.ERP.GOODS" :refresh="queryData" />
      </div>
    </a-row>
    <!---------- 表格操作行 end ----------->
    <div class="table-wrapper">
        <a-table
      size="small"
      :dataSource="tableData"
      :columns="columns"
      rowKey="id"
      bordered
      :scroll="{ x: 'max-content', y: tableScrollY }"
      :pagination="false"
      :showSorterTooltip="false"
      :loading="tableLoading"
      :row-selection="{}"
    >
      <!-- <template #summary>
        <a-table-summary-row>
          <a-table-summary-cell>总计</a-table-summary-cell>
          <a-table-summary-cell />
          <a-table-summary-cell>
            <a-typography-text type="danger">{{ total_amount.total_money.toFixed(2) }}</a-typography-text>
          </a-table-summary-cell>
          <a-table-summary-cell>
            <a-typography-text type="danger">{{ total_amount.out_money.toFixed(2) }}</a-typography-text>
          </a-table-summary-cell>
          <a-table-summary-cell>
            <a-typography-text type="danger">{{ total_amount.service_money.toFixed(2) }}</a-typography-text>
          </a-table-summary-cell>
          <a-table-summary-cell>
            <a-typography-text type="danger">{{ total_amount.end_money.toFixed(2) }}</a-typography-text>
          </a-table-summary-cell>
          <a-table-summary-cell>
            <a-typography-text type="danger">{{ total_amount.wait_money.toFixed(2) }}</a-typography-text>
          </a-table-summary-cell>
          <a-table-summary-cell>
            <a-typography-text type="danger">{{ total_amount.yfz_money.toFixed(2) }}</a-typography-text>
          </a-table-summary-cell>
        </a-table-summary-row>
      </template> -->
    </a-table>
    </div>

    <div class="smart-query-table-page query-table-page">
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.limit"
        v-model:current="queryForm.page"
        v-model:pageSize="queryForm.limit"
        :total="total"
        @change="queryData"
        @showSizeChange="queryData"
        :show-total="() => `共${total}条`"
      />
    </div>
  </a-card>
</template>
<script setup lang="ts">
  import { financeApi } from '@/api/business/report/finance-api'
  import DealerSelect from '@/components/business/select/dealer-select.vue'
  import TableOperator from '@/components/support/table-operator/index.vue'
  import { useQuery } from '@/hooks/web/use-query-hook'
  import { PAGE_SIZE_OPTIONS, DEFAULT_TIME_RANGE } from '@/constants/system/common-const'
  import { TABLE_ID_CONST } from '@/constants/support/table-id-const'
  import { QUERY_FORM_OP } from '@/constants/support/query-form-op-const'
  import { useResize } from '@/hooks/web/use-resize-hook'

  // ----------------------------- 计算表格高度 -----------------------------
  const { tableScrollY } = useResize()

  // ---------------------------- 表格列 ----------------------------

  const columns = ref([
    {
      title: '经销商',
      dataIndex: 'name',
    },
    {
      title: '结算总额',
      dataIndex: 'total_money',
    },
    {
      title: '出库金额',
      dataIndex: 'out_money',
    },
    {
      title: '服务费用',
      dataIndex: 'service_money',
    },
    {
      title: '费后总额',
      dataIndex: 'end_money',
    },
    {
      title: '待分账金额',
      dataIndex: 'wait_money',
    },
    {
      title: '已分账金额',
      dataIndex: 'yfz_money',
    },
  ]);

  // ---------------------------- 查询数据表单和方法 ----------------------------
  const total_amount = ref({
    total_money: 0,
    out_money: 0,
    service_money: 0,
    end_money: 0,
    wait_money: 0,
    yfz_money: 0,
  });
  const { queryForm, tableData, tableLoading, total, resetQuery, onSearch, queryData } = useQuery({
    fetchDataApi: async (params) => {
      const res = await financeApi.queryDealerList(params);
      const { data, ...other } = res.data;
      total_amount.value = {
        ...other,
      };
      return {
        list: res.data.data,
        total: res.data.total,
      };
    },
    queryFormFilter: {
      store_id: null,
      dealer_id: null,
      // create_time: [],
    },
    queryFormOp: {
      store_id: QUERY_FORM_OP['全等查询'],
      dealer_id: QUERY_FORM_OP['全等查询'],
      // create_time: QUERY_FORM_OP['范围查询'],
    },
  });
  onMounted(() => {
    queryData();
  });

  // ------------------------------- 导出和导入 ---------------------------------

  async function onExportGoods() {
    await financeApi.exportDealer({ export: 1 });
  }
</script>
